{include file="common/head"}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.js"></script>

</head>

<body style="text-align: left;">
  <div class="container p-3" style="max-width: 800px;">
    <h2>商品编辑</h2>
    <form method="post" enctype="multipart/form-data" action="/index.php/goods/edit">
      <input type="hidden" name="id" id="id" value="{$data.id}" />
      <input type="hidden" name="post" id="post" value="1" />

      {if $user.id==1}
      <div class="mb-3 row">
        <div class="col-2">
          <lable for="fid" class="form-label">商品分类: </label>
        </div>
        <div class="col-10">
          <select id="cat_id" name="cat_id" class="form-control">
            {foreach $cats as $k=>$v}
            <option value="{$k}" {if $k==$data.cat_id} selected style="color:blue;font-weight: bold;" {/if}>
              {if $v['deepth']==1}
              ├─
              {elseif $v['deepth']==2}
              &nbsp;&nbsp;&nbsp;&nbsp;├─
              {elseif $v['deepth']==3}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─
              {/if}
              {$v['name']}
            </option>
            {/foreach}
          </select>
        </div>
      </div>


      <div class="mb-3 row">
        <div class="col-2">
          <lable for="name" class="form-label">名称:</label>
        </div>
        <div class="col-10">
          <input type="text" class="form-control" id="name" name="name" value="{$data.name}" placeholder="Goods name" />
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-2"><label for="desc" class="form-label">产品说明:</label></div>
        <div class="col-10">
          <input type="text" class="form-control" id="desc" name="desc" value="{$data.desc}" placeholder="说明" />
        </div>
      </div>


      <div class="mb-3 row">
        <div class="col-2">
          <label for="price" class="form-label">价格/天:</label>
        </div>
        <div class="col-10">
          <input type="number" class="form-control" id="price" name="price" value="{$data.price}" placeholder="price" />
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-2"><label for="status" class="form-label">是否启用:</label></div>
        <div class="col-10">
          <input type="radio" class="form-check-input" id="radio1" name="status" value="1" {if $data.status==1} checked
            {/if} />
          <label class="form-check-label" for="radio1">上架</label>
          <input type="radio" class="form-check-input" id="radio2" name="status" value="2" {if $data.status==2} checked
            {/if} />
          <label class="form-check-label" for="radio2">下架</label>
        </div>
      </div>

      {/if}

      <div class="mb-3 row">
        <div class="col-2">
          <lable for="name" class="form-label">名称:</label>
        </div>
        <div class="col-10 fs-3">
          {$data.name} {$data.desc}
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-2">
          <label for="text" class="form-label">广告文字:</label>
        </div>
        <div class="col-10">
          <input type="text" class="form-control" id="text" name="text" value="{$data.text}" maxlength="10" placeholder="显示的文字" />
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-2">
          <label for="image_width" class="form-label">图片宽度:</label>
        </div>
        <div class="col-10">
          <input type="text" class="form-control" id="image_width" name="image_width" value="{$data.image_width}" maxlength="10" placeholder="图片在外部网站显示的宽度" />
        </div>
      </div>      

      <div class="mb-3 row">
        <div class="col-2">
          <label for="text" class="form-label">跳转链接:</label>
        </div>
        <div class="col-10">
          <input type="text" class="form-control" id="link_url" name="link_url" value="{$data.link_url}" placeholder="跳转链接" />
        </div>
      </div>

      {if ($data.cat_id==3 || $data.cat_id==5) && $data.status==1 }
      <div class="mb-3 row">
        <div class="col-2">
          <label for="file" class="form-label">图片(<c style='color:blue;'>建议：2张图,图1网页版长条形，图2手机版正方形</c>):</label>
        </div>
        <div class="col" style="display: flex;">
          {if $data.image}
          {foreach $data.image as $image}
          <div style="border:1px solid #ccc;text-align: center;margin-right:2px;">
            <img class="goods_image" src="{$image}" style="width:70px;" />
            <span class="bi-x-lg img_remove" row_id="{$data.id}" src="{$image}" title="删除图片"
              style="cursor: pointer;"></span>
          </div>
          {/foreach}
          {/if}
          <div>
            <button id="img_add" type="button" class="btn btn-info"><span class="bi-plus-lg"></span></button>
          </div>
          <input id="file1" type="file" name="file1" style="display: none;" />
        </div>
      </div>
      {/if}

      <button type="button" class="btn btn-primary" onclick="doSave()">保存(Save)</button>

    </form>
  </div>



  <script type="text/javascript">
    // var editor = Jodit.make('#content', {
    //   toolbarButtonSize: 'small',
    //   language: 'zh_cn',
    // });

    function doSave() {
      if (!$("#name").val()) {
        //layer.msg("别瞎闹！", function () { });
        //return false;
      }
      $('form').submit();
    }

    $(document).ready(function () {

      $(".img_remove").on('click', function () {
        var src = $(this).attr('src');
        var row_id = $(this).attr('row_id');

        //询问框
        layer.confirm('是否确定删除图片?', {
          btn: ['确定', '取消'] //按钮
        }, function () {

          $.post('/index.php/sys/img_remove', { tb: 'goods', row_id: row_id, field: 'image', src: src }, function (res) {
            if (res.code) {
              layer.msg(res.msg);
              location.reload();
            }
          })

        }, function () {
          layer.msg("好的!");
          return 0;
        });
      })

      $('#img_add').on('click', function () { $('#file1').click() });

      //提交图片
      $("#file1").on('change', function (e) {
        $("#tb").remove(); $("#source_url").remove();
        var el1 = '<input id="tb" name="tb" name="tb"  type="hidden" value="goods+image" />';
        var el2 = '<input id="source_url" name="source_url" type="hidden" value="/goods/edit/id/' + $('#id').val() + '" />';
        $('#file1').after(el1).after(el2);

        $("form").attr('action', '/sys/img_add').submit();
      })


      //提交图片
      $("#file2").on('change', function (e) {
        $("#tb").remove(); $("#source_url").remove();
        var el1 = '<input id="tb" name="tb"  type="hidden" value="goods+dt_imgs" />';
        var el2 = '<input id="source_url" name="source_url" type="hidden" value="/goods/edit/id/' + $('#id').val() + '" />';
        $('#file2').after(el1).after(el2);

        $("form").attr('action', '/sys/img_add').submit();
      })

    })  
  </script>


</body>

</html>